<template>
    <div>
        <el-row>
            <el-col :span="12">
                <el-card id="card">
                    <el-form :model="regForm" :rules="regRules" ref="regFormRef" label-width="100px">
                        <el-form-item label="账号" prop="zhanghao">
                            <el-input v-model="regForm.zhanghao"></el-input>
                        </el-form-item>
                        <el-form-item label="用户名" prop="name">
                            <el-input v-model="regForm.name"></el-input>
                        </el-form-item>
                        <el-form-item label="密码" prop="password">
                            <el-input v-model="regForm.password"></el-input>
                        </el-form-item>
                         <el-form-item label="邮箱" prop="email">
                            <el-input v-model="regForm.email"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="sub">提交</el-button>
                            <el-button type="info" @click="clear">重置</el-button>
                        </el-form-item>
                    </el-form>
                </el-card>
            </el-col>
        </el-row>
        
    </div>
</template>

<script>
export default {
    data(){
        var checkEmail =(rule, value, callback) =>{
        const regEmail = /^\w+@\w+(\.\w+)+$/
        if(regEmail.test(value)) {return callback();}
        callback(new Error('请输入正确邮箱'))};
        var checkZhang =(rule, value, callback) =>{
        const regZhang = /^[a-zA-Z][a-zA-Z0-9_]{7,15}$/
        if(regZhang.test(value)) {return callback();}
        callback(new Error('字母开头，允许8-16字节，允许字母数字下划线'))};
        var checkPass =(rule, value, callback) =>{
        const regPass = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9]{8,16}$/
        if(regPass.test(value)) {return callback();}
        callback(new Error('必须包含大小写字母和数字的组合，不能使用特殊字符，长度在 8-16 之间'))};
        return{
            regForm:{
                zhanghao:'',
                name:'',
                password:'',
                email:''
            },
            regRules:{
                zhanghao:[
                    { required: true, message: '请输入账号', trigger: 'blur' },
                    //{ min: 12, max: 20, message: '长度在 12 到 20 个字符', trigger: 'blur' },
                    { validator: checkZhang, trigger: 'blur' }
                ],
                name:[
                     { required: true, message: '请输入用户名', trigger: 'blur' },
                     { min: 4, max: 12, message: '长度在 4 到 12 个字符', trigger: 'blur' }
                ],
                password:[
                     { required: true, message: '请输入密码', trigger: 'blur' },
                     { validator: checkPass, trigger: 'blur' }
                ],
                email:[
                     { required: true, message: '请输入邮箱', trigger: 'blur' },
                     {validator:checkEmail,trigger:'blur'}
                ]
            }
        }
    },
    methods: {
        async sub(){
            const{data : res} = await this.$http.post('writers/zhuce',{zhanghao:this.regForm.zhanghao,username:this.regForm.name,password:this.regForm.password,email:this.regForm.email})
            if(res.msg === 'success'){
                this.$message.success("注册成功")
                this.$router.push('/writerLogin')
                this.$refs.regFormRef.resetFields();
            }
            if(res.status === 400){
                this.$message.error('用户已存在')
            }

            
        },
        clear(){
            
            this.$refs.regFormRef.resetFields();
        },
    },
}
</script>
<style lang="less" scoped>
    #card{
        position: fixed;
        top: 150px;
        left: 550px;
        width: 500px;
        height: 500px;
        
    }
</style>